<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" size="small" :inline="true" label-width="68px">
      <el-form-item label="合同名称" prop="t_name">
        <el-input v-model="queryParams.t_name" placeholder="请输入合同名称" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
           type="primary"
           plain
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd">
          新增
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" stripe :data="deviceList">
      <el-table-column type="index" label="序号" align="center"/>
      <el-table-column label="产品名称" align="center" prop="t_name"/>
      <el-table-column label="类别ID" align="center" prop="cId"/>
      <el-table-column label="计量单位" align="center" prop="t_unit"/>
      <el-table-column label="税率" align="center" prop="tax_rate"/>
      <el-table-column label="需求说明" align="center" prop="t_illustrate"/>
      <el-table-column label="备注" align="center" prop="t_notes"/>
      <el-table-column label="规格型号" align="center" prop="t_model"/>
      <el-table-column label="单价" align="center" prop="t_price"/> 
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="small" type="primary" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasRole="['common','controller']">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog width="30%" :title="title" :visible.sync="open" append-to-body>
      <div>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="产品id" prop="tId">
          <el-input v-model="formData.tId" placeholder="请输入产品名称"  show-word-limit clearable
            prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="t_name">
          <el-input v-model="formData.t_name" placeholder="请输入产品名称" show-word-limit clearable
            prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="cId">
          <el-cascader :options="field102Options" v-model="formData.cId" :show-all-levels="false" placeholder="请选择父级id" :style="{width: '100%'}"></el-cascader>
        </el-form-item>
        <el-form-item label="计量单位" prop="t_unit">
          <el-input v-model="formData.t_unit" placeholder="请输入计量单位" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="税率" prop="tax_rate">
          <el-input v-model="formData.tax_rate" placeholder="请输入税率" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="需求说明" prop="t_illustrate">
          <el-input v-model="formData.t_illustrate" placeholder="请输入需求说明" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="t_notes">
          <el-input v-model="formData.t_notes" placeholder="请输入备注" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="规格型号" prop="t_model">
          <el-input v-model="formData.t_model" placeholder="请输入规格型号" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="单价" prop="t_price">
          <el-input v-model="formData.t_price" placeholder="请输入单价" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    </el-dialog>
  </div>
</template>


<script>
import {listDevice,getDevice,insertDevice,updateDevice,getMax} from "@/api/system/device";
import { listCategory, getCategory, delCategory, addCategory, updateCategory,getLevel} from "@/api/system/category";
  export default {
    components: {},
    props: [],
    data() {
      return {
        //遮罩层
        loading: true,
        //总条数
        total: 0,
        //显示搜索条件
        showSearch: true,
        // 是否显示弹出层
        open: false,
        //弹出层标题
        title: "",
        //查询参数
        queryParams:{
          pageNum: 1,
          pageSize: 10,
          t_name: null,
          cId:null
        },
        flag:false,
        //设备信息表格数据
        deviceList: [],
        elForm:{},
        formData: {
          tId:0,
          t_name: '',
          cId: 0,
          du_code: undefined,
          t_unit: undefined,
          tax_rate: undefined,
          t_illustrate: '',
          t_notes: undefined,
          t_model: undefined,
          t_price: undefined,
        },
        rules: {
          t_name: [{
            required: true,
            message: '请输入产品名称',
            trigger: 'blur'
          }],
          
          t_unit: [{
            required: true,
            message: '请输入计量单位',
            trigger: 'blur'
          }],
          tax_rate: [{
            required: true,
            message: '请输入税率',
            trigger: 'blur'
          }],
          t_illustrate: [{
            required: true,
            message: '请输入需求说明',
            trigger: 'blur'
          }],
          t_notes: [],
          t_model: [{
            required: true,
            message: '请输入规格型号',
            trigger: 'blur'
          }],
          t_price: [{
            required: true,
            message: '请输入单价',
            trigger: 'blur'
          }],
        },
        field102Options: [],
        field102Props: {
          "multiple": false
        },
      }
    },
    computed: {},
    watch: {},
    created() {    
      this.getList();
      getLevel().then(res=>{
        res.data.forEach(item=>{
            if(item.children.length==0){
                delete item.children; // 删除 children 属性  
            }else{
              item.children.forEach(ele=>{
                  if(ele.children.length==0){
                      delete ele.children; // 删除 children 属性  
                  }
              })
          }
        })
        console.log(res.data,":奋斗啥方式");
        
       this.field102Options =res.data
      })
    },
    mounted() {},
    methods: {
      submitForm(){

        console.log(this.formData.tId ,"DSDSDS11111111111111111")
        this.$refs["elForm"].validate(valid => {
            if (valid) { // 只有在验证成功时才执行
              if (this.flag) { // 如果 tId 存在，表示是更新
                this.formData.cId=this.formData.cId[this.formData.cId.length-1];
                  updateDevice(this.formData).then(response => {
                      console.log(response.data);
                      this.$modal.msgSuccess("修改成功");
                      this.open = false;
                      this.getList();
                  }).catch(error => {
                      console.error("修改失败", error);
                  });
              } else {
                  // 处理新增逻辑
                  this.formData.cId=this.formData.cId[this.formData.cId.length-1];
                  insertDevice(this.formData).then(response => {
                      console.log(response.data);
                      this.$modal.msgSuccess("新增成功");
                      this.open = false;
                      this.getList();
                  }).catch(error => {
                      console.error("新增失败", error);
                  });
              }
            } else {
                console.error("表单验证失败");
            }
        });
      },
      getField102Options() {
        // TODO 发起请求获取数据
        this.field102Options
      },
      getList(){
        this.loading=true;
        console.log(this.queryParams,"555");
        listDevice(this.queryParams).then(response=>{
          console.log(response,"DSADSDS")
          this.deviceList=response.rows;
          this.total=response.total;
          this.loading=false;
        });
      },
      resetForm() {
        console.log("Resetting form data");
        if (this.$refs["elForm"]) {
            this.$refs["elForm"].resetFields(); // 只有在 elForm 存在时才调用
        } else {
            console.error("elForm is not defined");
        }
        this.formData = {
            tId: 0,
            t_name: '',
            cId: 0,
            t_unit: undefined,
            tax_rate: undefined,
            t_illustrate: '',
            t_notes: undefined,
            t_model: undefined,
            t_price: undefined,
        };
      },
      //新增按钮操作
      handleAdd(){
        this.open = true; // 打开对话框
        this.title = "新增产品"; // 设置对话框标题
        this.resetForm(); // 重置表单数据
        // 获取当前最大 tid
        getMax().then(response => {
          console.log("获取的最大 tid:", response.data); 
        //this.formData.tId = uuidv4(); 
        this.flag=false;
            this.formData.tId = response.data ? response.data + 1 : 1; // 如果没有数据，则从 1 开始
        }).catch(error => { 
            console.error("获取最大 tid 失败:", error);
            this.formData.tId = 1; // 如果获取失败，默认设置为 1
        });
      },
      //搜索按钮操作
      handleQuery(){
        this.queryParams.pageNum=1;
        this.getList();
        this.formData.tId = null; 
      },
      // 表单重置
      reset() {
        this.form = {
          rmId: null,
          eid: null,
          rmIllustrate: null,
          rmHappenDate: null,
          rmItem: null,
          rmStatus: 1,
        };
        this.resetForm("form");
      },
      //修改按钮操作
      handleUpdate(row) {
        console.log("准备修改的行数据:", row);
        this.reset(); // 重置表单数据
        const tId = row.tId; // 获取要修改的 tId
        getDevice(tId).then(response => {
            console.log(response, "获取的设备数据");
            this.formData = response.data; // 设置 formData 为获取到的数据
            this.open = true; // 打开对话框
            this.flag=true;//修改
            this.title = "修改产品"; // 设置对话框标题
        }).catch(error => {
            console.error("获取设备数据失败", error);
        });
      }  ,  /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      
    }
  }
  
  </script>
  <style>
  </style>
  